@CHARSET "UTF-8";
/*define z-index max value 9999*/

/**
 *@author Anderlu
 *@param 
 *@description common UI style
 */
.ui_mask {
    width:100%; 
    height:100%; 
    position:absolute; 
    left: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 99; 
    background: rgba(0, 0, 0, .5);
    /*opacity: .5;*/
    display:block;
}
.ui_loader {
    width: 60px;
    height: 60px;
    margin-left: -35px;
    margin-top: -35px;
    padding: 5px;
    position: absolute;
    left: 50%;
    top:50%;
    z-index: 9999;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    /*opacity: .9*/;
}
.ui_splashscreen{
    min-height: 100%;
    padding-top: 100px;
    z-index: 9999;
    color: #FFF;
    text-align: center;
    background: rgba(29, 29, 28, .8) ;
    /*opacity: .9;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/**
 *@author Anderlu
 *@param 
 *@description Dialog component style
 */
.ui_dialog{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    margin: 0px auto;
    opacity: 1;
    -webkit-transform: scale(1);
    -webkit-transition: all 0.3s ease-in-out;
}
.ui_dialog.hidden {
    -webkit-transform: scale(0);
}
.ui_dialog.ui_dialog_alert{
    width: 300px;
}
.ui_dialog.ui_dialog_confirm{
    width: 300px;
}
/**
 *@author Anderlu
 *@param 
 *@description Tips component style
 */
.ui_tips{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9998;
    margin: 0px auto;
    padding:5px 10px;
    color:#FFF;
    min-height:20px;
    line-height:20px;
    opacity: 1;
    background: rgba(0, 0, 0, .7) ;
    border: 1px rgba(0, 0, 0, .1) solid;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-transition: opacity 0.5s ease-in-out;
}
/**
 *@author Anderlu
 *@param 
 *@description icon
 */
.ui_icon{
    background-repeat: no-repeat;
    display: block;
}

.ui_icon_loading {
    background-image: url();
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
    margin: 0 auto;
}
/**
 *@author Anderlu
 *@param 
 *@description Animate style
 */

.animate_spin{
    -webkit-animation : spin 1s linear infinite;
    -moz-animation : spin 1s linear infinite;
    animation : spin 1s linear infinite;
}
@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.animate_touch_feedback{
    width:58px;
    height:58px;
    background-image: url("../../images/bg_touch.png");
    background-position:-58px 0;
    opacity:0.5; 
    -webkit-transform: scale(0);
    -webkit-animation : touch_feedback 0.5s ease infinite;
}
@-webkit-keyframes touch_feedback {
    0% { -webkit-transform: scale(0);}
    100%{ -webkit-transform: scale(1);}
}
@-moz-keyframes touch_feedback {
    0% { -webkit-transform: scale(0);}
    100%{ -webkit-transform: scale(1);}
}
@keyframes touch_feedback {
    0% { -webkit-transform: scale(0);}
    100%{ -webkit-transform: scale(1);}
}

/**
 *@author Anderlu
 *@param 
 *@description flexbox layout 
 http://blog.imbolo.com/the-css3-flexible-box-model/
 http://blog.imbolo.com/the-css3-flexible-box-model-2/
 http://xinyo.org/archives/63075/
 * */
.flexbox_horizon{
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
}

.flexbox_vertical{
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
}
.flexbox_v1{
    -webkit-box-flex:1;
    -moz-box-flex: 1; 
    box-flex: 1;
}

/**
 *@author Anderlu
 *@param 
 *@description Scoller component style
 */
.scroller_container {
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.scroller_content {
    
}
.scroller_paging_horizontal,
.scroller_paging_verticals {
    /*must be setting weight and height value*/
    overflow: hidden;
}

/**
 *@author Anderlu
 *@param 
 *@description Css Class
 */
/* Font Typeset
----------------------------------- */
.f9{font-size:9px;}
.f10{font-size:10px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.fcFFF, .fcWhite{color:#FFF;}
.fc000, .fcBlack{color:#000;}
.fcN{color:#3B384C;}
.fcPosi{color: #178b00;}
.fcNeg{color: #d90000;}
.fcEm{color: #971201;}
.fcEm1{color: #2C482B;}/*绿*/
.fcEm2{color: #135BBF;}/*蓝*/
.fcEm3{color: #AC061F;}/*红*/
.fcEm4{color: #FF9951;}/*黄*/
.fcEm5{color: #A92BAF;}/*紫*/

/* 更加强调突出 */
.fb{font-weight:bold;}
.fn{font-weight:normal;}

/* location
----------------------------------- */
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.tj{text-align:justify;}
.ul{text-decoration:underline;}
.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;_display:inline;}
.fr{float:right;_display:inline;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:right;}
.dtable{display:table;}
.dtcell{display:table-cell;}
.vt{vertical-align:top;}
.vm{vertical-align:middle;}
.vb{vertical-align:bottom;}
.pr{position:relative;}
.pa{position:absolute;}
.of{overflow:hidden;}
.zoom{zoom:1;}
.none{display: none;}
.hidden{opacity: 0;}
.visible{vopacity: 1;}
/* .none{display:none;} */
.show,
.block{display:block;}

/* margin
----------------------------------- */
.m0{margin:0;}
.m5{margin:5px;}
.m10{margin:10px;}
.m15{margin:15px;}

.mt5{margin-top:5px;}
.mt8{margin-top:8px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}

.mb5{margin-bottom:5px;}
.mb8{margin-bottom:8px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}

.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}

.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}

/* padding
----------------------------------- */
.p0{padding:0;}
.p5{padding:5px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p20{padding:20px;}

.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}

.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}

.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}

.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
